<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    echartsData: {},
    title: "",
    unit: "",
  },

  data() {
    return {
      isDownLoad: 0,
      legends: [],
      option: [],
      labelName: "",
      labelName1: "",
      echartsList: [],
      xlist: [],
      ylist: [],
      echartsList1: [],
      xlist1: [],
      ylist1: [],
      dataColumn: [],
      dataColumn1: [],
      openColumn: [],
      openColumn1: [],
      worldMapContainer: {},
    };
  },
  mounted() {
    console.log(111);
    this.worldMapContainer = document.getElementById("main");
    //设置容器高宽
    this.isDownLoad = this.$route.query.download;
    this.resizeWorldMapContainer();
    this.getEcharts();
  },
  methods: {
    async getEcharts() {
      let data = this.echartsData[0].dataList;
      this.xlist = data.map((item) => item.create_time);
      console.log(this.xlist);
      if (this.echartsData != null && this.echartsData.length > 0) {
        this.$nextTick(() => {
          this.getEcgarts();
        });
      }
    },

    //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    resizeWorldMapContainer() {
      if (this.isDownLoad == 1) {
        this.worldMapContainer.style.width = "3840px";
        this.worldMapContainer.style.height = "2164px";
      } else {
        this.worldMapContainer.style.width = window.innerWidth - 270 + "px";
        this.worldMapContainer.style.height = window.innerHeight - 10 + "px";
      }
    },
    downloadFile(url, fileName) {
      var link = document.createElement("a");
      //设置下载的文件名
      document.body.appendChild(link);
      link.style.display = "none";
      link.href = url;
      link.download = fileName;
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL();
      window.open(url);
    },

    getEcgarts() {
      var myChart = echarts.init(document.getElementById("main"));
      this.option = {
        tooltip: {
          trigger: "axis",
        },
        // backgroundColor: "",
        xAxis: {
          data: this.xlist,
          axisLabel: {
            // interval: 30,
          },
        },
        title: {
          text: this.title,
          x: "center",
          y: "top",
          textAlign: "left",
          textStyle: {
            fontSize: "22",
          },
        },
        animation: false,
        legend: {
          // 这个是图例
          // padding: [80, 190, 0, 0],
        },
        grid: {
          show: true,
          top: "60px",
          left: "1%",
          right: "4%",
          bottom: "0px",
          containLabel: true,
          borderWidth: 1,
          borderColor: "#D1D1D1",
          backgroundColor: "rgba(128, 128, 128, 0)",
        },
        yAxis: [
          {
            name: "",
            scale: true,
            type: "value",
            position: "left",
            splitLine: {
              show: true, //不显示横向网格线
            },
            nameTextStyle: {
              fontSize: "16",
            },
          },
        ],
        series: (() => {
          let serie = [];
          let legends = [];
          this.echartsData.map((item, index) => {
            let value = item.dataColumn;
            let label = item.openColumn;
            let legend = item.dataList[0][label];
            let data = {
              name: item.dataList[0][label],
              type: "line",
              data: item.dataList.map((item) => {
                return [item.create_time, item[value]];
              }),
            };
            legends.push(legend);
            this.legends = legends;
            serie.push(data);
          });
          return serie;
        })(),
      };

      let legend = {
        data: this.legends,
        x: "right",
        padding: [34, 50, 0, 0],
        textStyle: {
          fontSize: "",
        },
      };
      this.option.legend = legend;

      this.option.yAxis[0].name = "单位：" + this.unit;

      if (this.isDownLoad == 1) {
        this.option.yAxis[0].nameTextStyle = {
          fontSize: 60, //  字体大小
          lineHeight: 100,
          padding: [-120, 15, 4, 0], //  内填充
        };
        this.option.xAxis.axisLabel = { fontSize: "72", lineHeight: 150 };
        this.option.yAxis[0].axisLabel = { fontSize: "72" };
        this.option.title.textStyle.fontSize = 90;
        this.option.title.textStyle.lineHeight = 90;
        this.option.grid.left = 70;
        this.option.grid.top = 200;
        this.option.grid.right = 190;
        this.option.legend.padding = [70, 190, 0, 0];
        this.option.legend.textStyle.fontSize = 40;
        this.option.legend.textStyle.fontWeight = 40;
        this.option.legend.itemHeight = 20;
        this.option.legend.itemWidth = 40;
        this.option.legend.icon = "rect";
        this.option.legend.top = 40;

        let colorList = [
          "#ee6666",
          "#5470c6",
          "#7dcb58",
          "#fac858",
          "#c25afe",
          "#5aa3fe",
          "#fe5abb",
          "#b60000",
          "#2d2d2d",
          "#097f00",
        ];

        this.option.series.map((item, index) => {
          item.lineStyle = { width: 20, type: "solid" };
          item.color = colorList[index];
        });
      }
      myChart.setOption(this.option);

      if (this.isDownLoad == 1) {
        const chartImgUrl = myChart.getDataURL({
          pixelRatio: 1,
          // backgroundColor: "",
          backgroundColor: "rgba(128, 128, 128, 0)",

          type: "png",
        });
        setTimeout(() => {
          this.downloadFile(chartImgUrl, this.title);
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss">
#main {
  width: 100%;
  height: 500px;
}
</style>
